<table id="attribute"></table>

<script type="text/javascript">
var units;
var types;
var requireds;
$(function() {

	$.ajax({
		url:'${request.contextPath}${namespace?default('')}/mp/product/type-getUnits.json',
		dataType : 'JSON',
		success : function(json) {
			units = json;
		}
	});
	
	$.ajax({
		url:'${request.contextPath}${namespace?default('')}/mp/product/type-getTypes.json',
		dataType : 'JSON',
		success : function(json) {
			types = json;
		}
	});
	
	$.ajax({
		url:'${request.contextPath}${namespace?default('')}/mp/product/type-getRequireds.json',
		dataType : 'JSON',
		success : function(json) {
			requireds = json;
		}
	});
	
	$('#attribute').datagrid({
		iconCls:'icon-save',
		width:'auto',
		height:'auto',
		nowrap: false,
		fit:true,
		singleSelect:true,
		fitColumns:true,
		striped: true,
		sortName: 'id',
		sortOrder: 'desc',
		queryParams:{id:'${id?default('')}'},
		url:'${request.contextPath}${namespace?default('')}/mp/product/type-getAttributeList.json',
		remoteSort: true,
		idField:'id',
		onBeforeLoad:function(){$('#attribute').datagrid('unselectAll');},
		columns:[[
					{field:'ck',checkbox:true},
					{title:'${action.getDatagridTitle('attributeName')}',field:'name',width:100,align:'center',editor:{
							type: 'text' ,
							options:{
								required:true
							}
						}
					},
					{title:'${action.getDatagridTitle('type')}',field:'type',width:100,align:'center',formatter:function(val,rec){
						for(var i=0;i<types.length;i++){
							if(types[i].key == val){
								return types[i].value;
							}
						}
					},editor:{
							type:'combobox',
							options:{
								valueField:'key',
								textField:'value',
								data:types,
								required:true
							}
						}
					},
					{title:'${action.getDatagridTitle('selectValue')}',field:'selectValue',width:100,align:'center',editor:{
							type:'text'
						}
					},
					{title:'${action.getDatagridTitle('unit')}',field:'unit',width:100,align:'center',formatter:function(val,rec){
						for(var i=0;i<units.length;i++){
							if(units[i].key == val){
								return units[i].value;
							}
						}
					},editor:{
							type:'combobox',
							options:{
								valueField:'key',
								textField:'value',
								data:units,
								required:true
							}
						}
					},
					{title:'${action.getDatagridTitle('required')}',field:'required',width:100,align:'center',formatter:function(val,rec){
						for(var i=0;i<requireds.length;i++){
							if(requireds[i].key == val){
								return requireds[i].value;
							}
						}
					},editor:{
							type:'combobox',
							options:{
								valueField:'key',
								textField:'value',
								data:requireds,
								required:true
							}
						}
					}
				]],  
                toolbar : [  
                        {  
                            id : "Add",  
                            text : '${action.getText('bg.datagrid.add')}',  
                            iconCls : 'icon-add',  
                            handler : function() {  
                                $('#attribute').datagrid(  
                                        'endEdit', lastIndex);  
                                $('#attribute').datagrid(  
                                        'appendRow', {  
                                            name : '',  
                                            type : '',  
                                            selectValue : '', 
                                            state : 1, 
                                            unit : '',  
                                            required : ''  
                                        });  
                                var lastIndex = $('#attribute')  
                                        .datagrid('getRows').length - 1;  
                                $('#attribute').datagrid(  
                                        'selectRow', lastIndex);  
                                $('#attribute').datagrid(  
                                        'beginEdit', lastIndex);  
                            }  
                        },  
                        {  
                            id : "edit",  
                            text : '${action.getText('bg.datagrid.edit')}',  
                            iconCls : 'icon-edit',  
                            handler : function() {  
                                var row = $("#attribute").datagrid("getSelected");
                                if(row){
                                	var idx = $('#attribute').datagrid('getRowIndex',row);
									$('#attribute').datagrid('beginEdit', idx);
									
                                }
                            }  
                        },  
                        {  
                            id : "Delete",  
                            text : '${action.getText('bg.datagrid.delete')}',  
                            iconCls : 'icon-remove',  
                            handler : function() {  
                                var row = $("#attribute").datagrid("getSelected");
                                if(row){
                                	var idx = $('#attribute').datagrid('getRowIndex',row);
									$('#attribute').datagrid('deleteRow',idx);
                                }
                            }  
                        }],
		rownumbers:true,
		onDblClickRow:function(idx,data){if(typeof onDblClickRow_${action_id} != 'undefined'){onDblClickRow_${action_id}(idx,data)}},
		onClickRow:function(idx,data){if(typeof onClickRow_${action_id} != 'undefined'){onClickRow_${action_id}(idx,data)}},
		onRowContextMenu:function(e,idx,data){if(typeof onRowContextMenu_${action_id} != 'undefined'){$(this).datagrid('selectRow', idx);onRowContextMenu_${action_id}(e,idx,data)}}
	});
	
});

</script>
